<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style-type: none;
			}
			
			.links a {
				margin-left: 5px;
				float: left;
				background: skyblue;
				text-align: center;
				width: 100px;
				height: 30px;
				display: block;
			}
			
			
			.links .active {
				background: pink;
			}
		</style>
	</head>

	<body>

		<div class="links" id="links">
			<div class="left">
				<a href="#" class="active">left</a>
			</div>
			<div class="mid">
				<a href="#">mid</a>
			</div>
			<div class="right">
				<a href="#">right</a>
			</div>
		</div>
		
		
		
		

	</body>

	<script type="text/javascript">
		var bbb = document.getElementsByClassName('links')[0].getElementsByTagName('a');

		for(var i = 0; i < bbb.length; i++) {
			bbb[i].onclick = qweqwe;
		}

		function qweqwe() {
			for(var i = 0; i < bbb.length; i++) {
				bbb[i].className = ''
				if(bbb[i] === this)
					bbb[i].className = 'active';
			}
		}
	</script>

</html>